<template>
	<view>
		<CommonNavbar :navbarList="trafficList" :curNavbar="curNavbar" @handleChooseNavbar="handleChooseNavbar"></CommonNavbar>

		<view class="banner-wrap" v-if="curNavbar && curNavbar.alias!=='rent'">
			<!-- <swiper circular :autoplay="true" :interval="3000" :duration="1000" v-if="curNavbar.alias==='carpool'">
				<swiper-item v-for="(item,index) in carpoolBannerList" :key="index">
					<view class="swiper-item">
						<image :src="item.img" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper> -->
			<!-- 	<swiper circular :autoplay="true" :interval="3000" :duration="1000" v-if="curNavbar.alias==='Chartered'">
				<swiper-item v-for="(item,index) in charteredBannerList" :key="index">
					<view class="swiper-item">
						<image :src="item.img" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper> -->
			<map id="map" style="width: 100%; height: 520rpx;" :latitude="latitude" :longitude="longitude" :markers="covers"
			 :polyline="polyline" :include-points="covers">
			</map>
		</view>

		<view class="carpool_package_info-wrap" v-if="showCarpoolPackage && curNavbar && curNavbar.alias==='carpool'">
			<view class="price"><text style="font-size: 42rpx;">￥</text>{{showCarpoolPackagePrice}}</view>
			<uni-icons class="icon" type="help" size="24" color="#999" @click="goToFWb(5,'费用说明')"></uni-icons>
		</view>

		<view class="travel_detail-wrap" v-if="curNavbar && curNavbar.alias!=='rent'">
			<view class="step-wrap">
				<view class="dot dot_from"></view>
				<view class="dot dot_to"></view>
			</view>
			<view class="from-wrap input-wrap" @click="handleChooseAddress('from')">
				<input class="input" disabled type="text" v-model="travelDetailObj.fromArea" placeholder="请选择出发地">
				<view class="more-icon">
					<image src="../../static/imgs/icons/more-icon.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="to-wrap input-wrap" @click="handleChooseAddress('to')">
				<input class="input" disabled type="text" v-model="travelDetailObj.toArea" placeholder="请选择目的地">
				<view class="more-icon">
					<image src="../../static/imgs/icons/more-icon.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="input-wrap">
				<view class="input_date-wrap " @click="handleChooseDate">
					<input class="input" disabled type="text" :value="travelDetailObj.date && !travelDetailObj.date.label  ? travelDetailObj.date : ''" placeholder="请选择预约时间">
					<view class="more-icon tp-fc999">
						<!-- <image src="../../static/imgs/icons/more-icon.png" mode="aspectFill"></image> -->
						|
					</view>
				</view>
				<view class="input_recommend-wrap">
					<input class="input" v-model="travelPersonNum" type="number" @blur="judge" :placeholder="pinNumber > 1?pinNumber+'人起订':'请输入拼车人数'"
					 v-if="curNavbar && curNavbar.alias==='carpool'" @input="handleInputTravelPersonNum">
					<input class="input" v-model="travelPersonNum" type="number" @blur="judge" placeholder="请填写人数" v-else>
					<text v-if="curNavbar && showCarpoolPackage && curNavbar.alias==='carpool' && travelPersonNum">人</text>
					<view class="more-icon">
						<image src="../../static/imgs/icons/more-icon.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="input-wrap" v-if="curNavbar && curNavbar.alias==='carpool'">
				<input class="input remark_input" type="text" v-model="travelDetailObj.remark" placeholder="请填写备注">
			</view>
			<view class="tp-fz24 tp-fc666 tp-h64 level_align"  v-if="curNavbar && curNavbar.alias==='carpool'">
				注：拼车起步价{{initInfo.startPrice || 0}}元（含{{initInfo.startMile || 0}}公里）
			</view>
		</view>


		<view class="travel_rent_content-wrap" v-if="curNavbar && curNavbar.alias =='rent'">
			<view class="ul_wrap">
				<view class="li-wrap" @click="handleGoCityList('from')">
					<text class="tip">取车城市</text>
					<view class="con address">
						<view class="ellispsis1">{{ChoosedRentCity && ChoosedRentCity.from &&  ChoosedRentCity.from.value || '请选择'}}</view>
						<text class="after"></text>
					</view>
				</view>
				<view class="li-wrap" @click="handleGoCityStationList('from')">
					<text class="tip">取车地点</text>
					<view class="con address">
						<view class="ellispsis1">{{choosedRentCityStation && choosedRentCityStation.from && choosedRentCityStation.from.name || '请选择'}}</view>
					</view>
				</view>
				<view class="li-wrap">
					<text class="tip">异店还车</text>
					<view class="con">
						<switch color="#00B4FF" style="transform:scale(0.8)" :checked="false" @change="handleSwitchOffsiteTransfer" />
					</view>
				</view>
			</view>
			<view class="ul_wrap" v-if="rentChooseOffsite">
				<view class="li-wrap" @click="handleGoCityList('to')">
					<text class="tip">还车城市</text>
					<view class="con address">
						<view class="ellispsis1" v-if="ChoosedRentCity.to && ChoosedRentCity.to.value">{{ChoosedRentCity.to.value}}</view>
						<view class="ellispsis1" v-else>请选择</view>
						<text class="after"></text>
					</view>
				</view>
				<view class="li-wrap" @click="handleGoCityStationList('to')">
					<text class="tip">还车地点</text>
					<view class="con address">
						<view class="ellispsis1" v-if="choosedRentCityStation && choosedRentCityStation.to && choosedRentCityStation.to.name">{{choosedRentCityStation.to.name}}</view>
						<view class="ellispsis1" v-else>请选择</view>
					</view>
				</view>
				<view class="li-wrap"></view>
			</view>
			<view class="ul_wrap">
				<view class="li-wrap date">
					<text class="tip">用车时间</text>
					<view class="con address" style="width:500rpx;" @click="handleChooseDate">
						<input class="input" type="text" disabled :value="travelDetailObj.date && !travelDetailObj.date.label  ? travelDetailObj.date : ''" placeholder="请选择用车时间" />
					</view>
				</view>
				<view class="li-wrap"></view>
				<view class="li-wrap"></view>
			</view>

			<view class="common-btn" @click="handleGoTravelRentList">发起租车</view>
		</view>

		<view @click="handleGoCarpoolOrder" class="common-btn" v-if="curNavbar && curNavbar.alias==='carpool'">发起拼车</view>
		<view @click="handleGoTravelCharteredList" class="common-btn" v-if="curNavbar && curNavbar.alias==='Chartered'">发起包车</view>

		<!-- 导游 S -->
		<view class="other-wrap" v-if="curNavbar && curNavbar.alias==='rent'">
			<view class="l-wrap">
				<image :src="www + 'imgs/travel/custom_travel.png'" mode="aspectFill"></image>
			</view>
			<view class="r-wrap">
				<view class="img">
					<image :src="www + 'imgs/travel/scenic.png'" mode=""></image>
				</view>
				<view class="img">
					<image :src="www + 'imgs/travel/hotel.png'" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 导游 E -->

		<CommonAuthorize ref="authorize" @confirm="handleGoAuthorize"></CommonAuthorize>

		<w-picker mode="shortTerm" :value="initChooseStartDate" :current="false" :travelDate="travelDateShowBtnDetail"
		 :showMinutes="showMinutes" :expand="durationDay" @confirm="handleConfirmChooseDate($event,'shortTerm', travelStatus)"
		 @handleSwitchTravelStatus="handleSwitchTravelStatus" ref="shortTerm"></w-picker>

	</view>
</template>

<script>
	import $DB from '../../utils/debounce.js'
	import Utils from '../../utils/utils.js'
	import calendar from '../../components/tp-calendar/util.js'
	var QQMapWX = require('@/utils/qqmap-wx-jssdk/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	import CommonNavbar from '@/components/common/common-navbar.vue'
	import CommonAuthorize from '@/components/common/common-authorize.vue'
	export default {
		components: {
			CommonNavbar,
			CommonAuthorize
		},
		data() {
			return {
				locationPoint: [], // 当前位置的定位
				carpoolBannerList: [],
				charteredBannerList: [],
				showMinutes: true, // 时间选择器中是否展示分钟
				trafficList: [{
						name: '机场专线',
						alias: 'bus'
					},
					{
						name: '拼车',
						alias: 'carpool'
					}, {
						name: '包车',
						alias: 'Chartered'
					},
					{
						name: '租车',
						alias: 'rent'
					}
				],
				curNavbar: {
					name: '拼车',
					alias: 'carpool'
				},
				travelDetailObj: { // 出发地
					fromArea: '',
					toArea: '',
					date: '',
					dateObj: {
						date: {},
						hour: {},
						minute: {},
						year: '',
						month: '',
						day: ''
					},
					remark: ''
				},
				travelFromObj: {}, // 出发地详情
				initChooseStartDate: '', // 初始化选择出发时间的开始时间（默认当前时间）
				travelStatus: 'now', // 立即出发|前后5分钟出发
				travelDateShowBtnDetail: '', // 展示选择后的出发时间
				showCarpoolPackage: false, // 展示拼车套餐
				showCarpoolPackagePrice: 0, //显示拼车套餐的价格
				CarpoolPackageSinglePrice: 0, // 后台设置的拼车套餐单价
				travelPersonNum: '', // 旅行人数
				initDateState: false, // 是否初始化时间
				rentChooseOffsite: false, // 租车异地还车 
				delayDay: 0, // 默认可以选择几天后的日期
				durationDay: 30, // 可以选择多少天内的
				distance: 1, // 距离
				pinNumber: null, // 	拼车起订人数
				shopId: null, // 商家id
				
				city: '', // 选择的出发地城市
				latitude: 0, // 纬度
				longitude: 0, // 经度
				covers: [], // 地图上的标记点
				polyline: [ // 地图上的标记点连线
					{
						points: [],
						color: '#0000AA',
						width: 3,
						arrowLine: true,
					}
				],
				
				lastChoosedRentCity: '', // 选择的上一个租车城市
				initInfo: {}, // 拼车包车 起步价等信息
			};
		},
		onLoad(opt) {
			this.initMap()
			this.curNavbar = opt && opt.curTrafficinfo && JSON.parse(opt.curTrafficinfo)
			this.getBannerList()
			this.initData()
			this.pinNumber = Number(this.$store.getters.getPinNumber)
		},
		onShow() {
			this.updateChoosedAddress()
		},
		computed: {
			ChoosedRentCity() {
				let obj =  this.$store.getters.getChoosedRentCity
				if(this.city != (obj && obj.from && obj.from.value) && obj && obj.from && obj.from.value){
					setTimeout(() => {
						this.getShopId(obj.from.value)
						this.getDelayDays()
					},200)
				}
				// if(this.lastChoosedRentCity  != (obj && obj.from && obj.from.value) ){
				// 	this.$store.commit('delChoosedRentCityStation')
				// }
				// this.lastChoosedRentCity = obj.from.value
				return obj
			},
			choosedRentCityStation() {
				return this.$store.getters.getChoosedRentCityStation
			}
		},
		watch: {
			'travelDetailObj.toArea': {
				handler(v) {
					if (v) {
						if (this.curNavbar && this.curNavbar.alias === 'carpool') {
							// #ifdef MP-WEIXIN
							this.getDistance()
							// #endif

							// #ifdef H5
							this.H5pointJuli()
							// #endif


						}
					}
				}
			},
		},
		methods: {
			getDelayDays() {
				// 预售时间
				let url = ''

				switch (this.curNavbar && this.curNavbar.alias) {
					case 'carpool':
						url = this.$api.pcRoadTime
						break
					case 'Chartered':
						url = this.$api.bcRoadTime + '?shopId=' + this.shopId
						break
					case 'rent':
						url = this.$api.zcRoadTime + '?shopId=' + this.shopId
						break
				}
				this.$http.get(url).then(res => {
					if (res.code === 200) {
						switch (this.curNavbar && this.curNavbar.alias) {
							case 'carpool':
								this.delayDay = res.data.pinche
								this.durationDay = res.data.pinSaleTime
								break
							case 'Chartered':
								this.delayDay = res.data.baoche
								this.durationDay = res.data.baoSaleTime
								break
							case 'rent':
								this.delayDay = res.data.zuche
								this.durationDay = res.data.zuSaleTime
								break
						}
						this.initChooseDate()
					}
				})
			},
			initMap() {
				qqmapsdk = new QQMapWX({
					key: 'C7JBZ-VQD6D-BVZ4C-PHTJO-HNPSF-ORFT5'
				});
				this.getLocation()
			},
			initData() {
				this.$store.commit('delChoosedAddressObj')
				this.$store.commit('delChoosedRentCity')
				this.$store.commit('delChoosedRentCityStation')
				this.$store.commit('delRentInfo')
			},
			handleGoCityList(travelsStatus) {
				uni.navigateTo({
					url: './cityList?travelsStatus=' + travelsStatus
				});
			},
			handleGoCityStationList(travelsStatus) { // 跳转到地图站点列表选择站点
				let val = this.ChoosedRentCity[travelsStatus] && this.ChoosedRentCity[travelsStatus].value
				uni.navigateTo({
					url: '../../pagesTravel/rentStationMap?city=' + val + '&travelsStatus=' +
						travelsStatus
				});
			},
			handleChooseNavbar(item, index) {

				if (item.alias === 'bus') {
					this.curNavbar = item
					uni.switchTab({
						url: '/pages/tabbar/home'
					})
				} else if (item.alias == 'carpool' || item.alias == 'Chartered') {
					this.$http.get(this.$api.trafficOpen).then(res => {
						if (res.code === 200) {
							if (item.alias == 'carpool') {
								if (res.data.pin == 0) {
									this.curNavbar = item
									this.getBannerList()
									this.initChooseDate()
								} else {
									uni.showToast({
										title: '拼车暂无开放',
										icon: 'none'
									})
								}
								this.getDelayDays()
							}
							if (item.alias == 'Chartered') {
								if (res.data.bao == 0) {
									this.curNavbar = item
									this.getBannerList()
									this.initChooseDate()
								} else {
									uni.showToast({
										title: '包车暂无开放',
										icon: 'none'
									})
								}
								this.getDelayDays()
							}
							this.pinNumber = Number(res.data.pinNumber)
							this.$store.commit('upPinNumber', Number(res.data.pinNumber))
						}
					})

				} else {
					this.curNavbar = item
					this.getBannerList()
					this.getDelayDays()
					this.initChooseDate()
				}
				if (!['Chartered', 'rent'].includes(item)) {
					this.travelPersonNum = ''
				}
			},
			handleChooseAddress(status) {
				const pages = getCurrentPages()
				const page = pages[pages.length - 1]
				const url = page.route
				uni.navigateTo({
					url: './map?travelsStatus=' + status
				});
			},
			// 选择预约时间
			handleChooseDate() {
				if (this.curNavbar.alias === 'Chartered') {
					// this.showMinutes = false
					this.showMinutes = true
				} else {
					this.showMinutes = true
				}
				this.$refs.shortTerm.show();
				this.initDateState = true
			},
			// 选择时间
			handleConfirmChooseDate(e, snap, travelStatus) {

				const formatNum = this.formatNum
				if (!this.initDateState) return
				this.travelStatus = travelStatus
				// console.log('e.value', e.value);
				let newDate = this.getNewDate(e)
				if (!newDate) {
					return uni.showToast({
						title: '请选择\n' + this.initChooseStartDate + '之后的时间',
						icon: 'none'
					})
				}
				this.travelDetailObj.date = e.value
				this.travelDetailObj.dateObj = e.obj
				if (!e.obj.year) {
					const y = formatNum(e.obj.date.split('-')[0])
					const m = formatNum(e.obj.date.split('-')[1])
					const d = formatNum(e.obj.date.split('-')[2])
					this.travelDetailObj.date = {
						label: `${m}月${d}日`,
						value: `${y}-${m}-${d}`,
					}
					this.travelDetailObj.dateObj.year = y
					this.travelDetailObj.dateObj.month = m
					this.travelDetailObj.dateObj.day = d
					this.travelDetailObj.dateObj.hour = {
						label: formatNum(e.obj.hour),
						value: formatNum(e.obj.hour)
					}
					this.travelDetailObj.dateObj.minute = {
						label: formatNum(e.obj.minute),
						value: formatNum(e.obj.minute)
					}
				}
				// const date = new Date()
				// let hours = formatNum(date.getHours());
				// const curYear = date.getFullYear();
				// const curMonth = formatNum(date.getMonth()+1);
				// const curDay = formatNum(date.getDate());
				// const curDateFull = formatNum(curYear)+'-'+formatNum(curMonth)+'-'+formatNum(curDay)
				// const eHours = e.obj.hour.value ||  e.obj.hour
				// const eMinutes = e.obj.minute.value ||  e.obj.minute || '00'
				// if (curDateFull === e.obj.date) {
				// 	this.travelDetailObj.dateObj.date = `今天 ${eHours}:${eMinutes}`
				// }

				// if (this.travelDetailObj.dateObj.hour.value <= hours) {
				// 	uni.showToast({
				// 		title: '请选择合理的预约时间',
				// 		icon: 'none'
				// 	})
				// }
			},
			// 获取当前时间
			getNewDate(e) {
				// console.log(e);
				// let aaa = new Date()
				const delayDateObj = calendar.pinDateFn(this.delayDay)
				const arr_ = delayDateObj.split('-')
				let y = arr_[0]
				let m = arr_[1]
				let d = arr_[2]

				const date = new Date()
				let newDate = ''
				let size = true
				// let y = date.getFullYear(); //获取完整的年份(4位)
				// let m = date.getMonth()+1; //获取当前月份(0-11,0代表1月)
				// let d = date.getDate(); //获取当前日(1-31)
				let h = (date.getHours() + this.delayDay) % 24; //获取当前小时数(0-23)  + 上后台设置的小时数
				let f = date.getMinutes(); //获取当前分钟数(0-59)
				m = m.toString().padStart(2, 0)
				d = d.toString().padStart(2, 0)
				h = h.toString().padStart(2, 0)
				f = f.toString().padStart(2, 0)

				let valDay = (m) + '月' + d + '日'
				let valday1 = y + '-' + m + '-' + d

				if (e.obj.date.label == valDay || e.obj.date == valday1) {
					if (e.obj.hour.label == h) {
						if (e.obj.minute.label == f || Number(e.obj.minute.label) < Number(f)) {
							size = false
						}
					} else if (Number(e.obj.hour.label) < Number(h)) {
						size = false
					}
				}
				// console.log(y+ '年'+m + '月' + d + '日 ' + h + ':' + f);
				// newDate = (m) + '月' + d + '日 ' + h + ':' + f
				return size
			},
			handleShowCarPoolPackageDetail() { // 展示费用详情介绍
				console.log('展示费用详情');
			},
			handleShowCarPoolPackage() { // 展示套餐
				this.showCarpoolPackage = true
				if (this.curNavbar.alias === 'carpool' && !this.travelPersonNum) {
					// this.travelPersonNum = this.pinNumber
					this.showCarpoolPackagePrice = Math.round(this.CarpoolPackageSinglePrice * this.distance * this.travelPersonNum *100) / 100
				}
			},
			// 判断input 大于0
			judge(e) {
				if (e.detail.value < 1) {
					this.travelPersonNum = ''
					return uni.showToast({
						title: '请输入大于0的人数',
						icon: 'none'
					})
				}
			},
			handleInputTravelPersonNum: $DB(function(e) {
				/*
				小于人数
						大于起步公里数
							起步价 * 起订人数 + (剩余公里数) * 单价 * 起订人数
						小于公里数
							起步价 * 起订人数
				大于人数
						大于公里数
							起步价 * 人数 +  剩余公里数 * 单价 * 每个人的比例
						小于起步公里数
							起步价 * (每个人的比例)
				*/
				let singlePrice = this.CarpoolPackageSinglePrice * (Number(this.distance) -  Number(this.initInfo.startMile))  // 剩余公里数 * 单价
				let num = parseInt(e.detail.value) || 1
				if (num < this.pinNumber) {  // 小于起订人数
					if(Number(this.distance) > Number(this.initInfo.startMile)){  // 大于起步公里数
						this.showCarpoolPackagePrice = (Math.round(Number(this.initInfo.startPrice) *  this.pinNumber * 100 + singlePrice * this.pinNumber * 100) )/ 100
					} else {   // 小于起步公里数
						this.showCarpoolPackagePrice = (Math.round(Number(this.initInfo.startPrice) *  this.pinNumber  * 100) )/ 100
					}
					// this.showCarpoolPackagePrice = (Math.round(this.pinNumber * singlePrice * 100) )/ 100  // 加起步价之前的计算方式
				} else {  // 大于起订人数
					this.travelPersonNum = num
					// this.showCarpoolPackagePrice = Math.round(num * singlePrice * 100) / 100  // 加起步价之前的计算方式
					if(Number(this.distance) > Number(this.initInfo.startMile)){  // 大于起步公里数
						this.showCarpoolPackagePrice = Math.round(Number(this.initInfo.startPrice) *  num * 100  + singlePrice * num * 100) / 100
					} else { // 小于起步公里数
						this.showCarpoolPackagePrice = Math.round(Number(this.initInfo.startPrice) *  num   * 100) / 100
					}
				}
			
			}, 200),
			handleSwitchOffsiteTransfer(e) { // 切换异地换车按钮
				this.rentChooseOffsite = e.target.value
			},
			// 发起拼车
			handleGoCarpoolOrder() {
				let fromArea = this.travelDetailObj && this.travelDetailObj.fromArea || ''
				let toArea = this.travelDetailObj && this.travelDetailObj.toArea || ''
				if (!fromArea.trim()) return uni.showToast({
					title: '请选择出发地',
					icon: 'none'
				})
				if (!toArea.trim()) return uni.showToast({
					title: '请选择目的地',
					icon: 'none'
				})
				if (!this.travelDetailObj.date) return uni.showToast({
					title: '请选择时间',
					icon: 'none'
				})
				if (!this.travelPersonNum) return uni.showToast({
					title: '请填写出行人数',
					icon: 'none'
				})
				const D = this.travelDetailObj.dateObj.date.value || this.travelDetailObj.dateObj.date
				const T = (this.travelDetailObj.dateObj.hour.value || this.travelDetailObj.dateObj.hour) + ':' + (this.travelDetailObj
					.dateObj.minute.value || this.travelDetailObj.dateObj.minute) + ':00'
				const str = D + ' ' + T
				const countTime = Utils.getCountDownTime(str, 0)
				// console.log(countTime);
				if (!countTime) {
					return uni.showToast({
						title: '请重新选择出发时间',
						icon: 'none'
					})
				}
				let travelInfo = this.travelDetailObj
				travelInfo.personNum = this.travelPersonNum || 1
				travelInfo.pinNumber = this.pinNumber
				travelInfo.price = this.showCarpoolPackagePrice
				travelInfo.singlePrice = this.CarpoolPackageSinglePrice
				travelInfo.startMile = this.initInfo.startMile
				travelInfo.startPrice = this.initInfo.startPrice
				this.$store.dispatch('getUserAuthorizeStatus').then(res => {
					if (res.code === 200) {
						let {
							assetsStatus
						} = res.data
						if (assetsStatus == 1) { // 需要实名认证
							return this.$refs.authorize.show()
						} else {
							uni.navigateTo({
								url: '../order/carpool.order?travelInfo=' + JSON.stringify(travelInfo)
							});
						}
					}
				})

			},
			handleGoTravelCharteredList() {
				let fromArea = this.travelDetailObj && this.travelDetailObj.fromArea || ''
				let toArea = this.travelDetailObj && this.travelDetailObj.toArea || ''
				if (!fromArea.trim()) return uni.showToast({
					title: '请选择出发地',
					icon: 'none'
				})
				if (!toArea.trim()) return uni.showToast({
					title: '请选择目的地',
					icon: 'none'
				})
				if (!this.travelDetailObj.date) return uni.showToast({
					title: '请选择时间',
					icon: 'none'
				})
				const D = this.travelDetailObj.dateObj.date.value || this.travelDetailObj.dateObj.date
				const T = (this.travelDetailObj.dateObj.hour.value || this.travelDetailObj.dateObj.hour) + ':' + (this.travelDetailObj
					.dateObj.minute.value || this.travelDetailObj.dateObj.minute) + ':00'
				const str = D + ' ' + T
				const countTime = Utils.getCountDownTime(str, 0)
				// console.log(countTime);
				if (!countTime) {
					return uni.showToast({
						title: '请重新选择出发时间',
						icon: 'none'
					})
				}
				if (!this.travelPersonNum.trim()) return uni.showToast({
					title: '请填写人数',
					icon: 'none'
				})
				let travelInfo = this.travelDetailObj
				travelInfo.personNum = this.travelPersonNum
				travelInfo.city = this.city
				this.$store.dispatch('getUserAuthorizeStatus').then(res => {
					if (res.code === 200) {
						let {
							assetsStatus
						} = res.data
						if (assetsStatus == 1) { // 需要实名认证
							return this.$refs.authorize.show()
						} else {
							uni.navigateTo({
								url: '../../pagesTravel/travelCharteredList?travelInfo=' + JSON.stringify(travelInfo)
							});
						}
					}
				})

			},
			handleGoTravelRentList() {
				if (this.ChoosedRentCity.from && !this.ChoosedRentCity.from.label) {
					return uni.showToast({
						title: '请选择取车城市',
						icon: 'none'
					})
				}
				if (!this.choosedRentCityStation.from || !this.choosedRentCityStation.from || !this.choosedRentCityStation.from.name) {
					return uni.showToast({
						title: '请选择取车站点',
						icon: 'none'
					})
				}
				if (this.rentChooseOffsite && (!this.ChoosedRentCity.to || !this.ChoosedRentCity.to.label)) {
					return uni.showToast({
						title: '请选择还车城市',
						icon: 'none'
					})
				}
				if (this.rentChooseOffsite && (!this.choosedRentCityStation.to || !this.choosedRentCityStation.to.name)) {
					return uni.showToast({
						title: '请选择还车站点',
						icon: 'none'
					})
				}
				if (!this.travelDetailObj.date) {
					return uni.showToast({
						title: '请选择用车时间',
						icon: 'none'
					})
				}
				const D = this.travelDetailObj.dateObj.date.value || this.travelDetailObj.dateObj.date
				const T = (this.travelDetailObj.dateObj.hour.value || this.travelDetailObj.dateObj.hour) + ':' + (this.travelDetailObj
					.dateObj.minute.value || this.travelDetailObj.dateObj.minute) + ':00'
				const str = D + ' ' + T
				const countTime = Utils.getCountDownTime(str, 0)
				// console.log(countTime);
				if (!countTime) {
					return uni.showToast({
						title: '请重新选择出发时间',
						icon: 'none'
					})
				}
				let travelInfo = {
					dateObj: this.travelDetailObj.dateObj,
					choosedCity: this.ChoosedRentCity,
					choosedStation: this.choosedRentCityStation
				}
				this.$store.dispatch('getUserAuthorizeStatus').then(res => {
					if (res.code === 200) {
						let {
							assetsStatus
						} = res.data
						if (assetsStatus == 1) { // 需要实名认证
							return this.$refs.authorize.show()
						} else {
							uni.navigateTo({
								url: '../../pagesTravel/travelRentList?shopId=' + this.choosedRentCityStation.from.shopId
							});
							this.$store.commit('upRentInfo', travelInfo)
						}
					}
				})

			},
			// 去实名认证
			handleGoAuthorize() {
				uni.navigateTo({
					url: '/pagesUser/realNameAuthentication'
				});
			},
			updateChoosedAddress() {
				let {
					to,
					from,
				} = this.$store.getters.getChoosedAddressObj
				this.travelDetailObj.fromArea = from && from.formatted_addresses.recommend
				this.travelDetailObj.fromObj = from && from.location
				this.travelDetailObj.toArea = to && to.formatted_addresses.recommend
				this.travelDetailObj.toObj = to && to.location
				let arr = [];
				if (from && from.location) {
					// 起点
					arr.push({
						id: 2,
						latitude: this.travelDetailObj.fromObj.lat,
						longitude: this.travelDetailObj.fromObj.lng,
						iconPath: '/static/imgs/icons/from-icon.png',
						width: 18,
						height: 34,
					})
				}
				if(from && from.ad_info && this.curNavbar.alias != 'rent'){
					this.city = from.ad_info.city
					this.getShopId(from.ad_info.city)
				}
				if (to && to.location) {
					// 终点
					arr.push({
						id: 3,
						latitude: this.travelDetailObj.toObj.lat,
						longitude: this.travelDetailObj.toObj.lng,
						iconPath: '/static/imgs/icons/to-icon.png',
						width: 18,
						height: 34,
					})
					// 线路的路线
					// #ifdef H5
					let formGet = this.travelDetailObj.fromObj.lat + ',' + this.travelDetailObj.fromObj.lng
					let toGet = this.travelDetailObj.toObj.lat + ',' + this.travelDetailObj.toObj.lng
					this.$http.get(this.$api.customerDriverLine + '?from=' + formGet + '&to=' + toGet).then(res => {
						var coors = res.data.result.routes[0].polyline;
						for (let i = 2; i < coors.length; i++) {
							coors[i] = coors[i - 2] + coors[i] / 1000000
						}
						var coors1 = [],
							n = 0;
						let b = {}
						for (let i = 0; i < coors.length; i++) {
							if (i % 2 == 1) {
								b.longitude = coors[i]
								coors1[n] = b
								b = {}
								n++
							} else {
								b.latitude = coors[i]
								coors1[n] = b
							}
						}
						this.polyline[0].points = coors1
					})
					// #endif
					// 线路的路线
					// #ifdef MP-WEIXIN
					this.$http.get('https://apis.map.qq.com/ws/direction/v1/driving/?from=' + this.travelDetailObj.fromObj.lat + ',' +
						this.travelDetailObj.fromObj.lng + '&to=' + this.travelDetailObj.toObj.lat + ',' + this.travelDetailObj.toObj.lng +
						'&output=json&callback=cb&policy=LEAST_TIME&key=C7JBZ-VQD6D-BVZ4C-PHTJO-HNPSF-ORFT5').then(res => {
						var coors = res.result.routes[0].polyline;
						for (let i = 2; i < coors.length; i++) {
							coors[i] = coors[i - 2] + coors[i] / 1000000
						}
						var coors1 = [],
							n = 0;
						let b = {}
						for (let i = 0; i < coors.length; i++) {
							if (i % 2 == 1) {
								b.longitude = coors[i]
								coors1[n] = b
								b = {}
								n++
							} else {
								b.latitude = coors[i]
								coors1[n] = b
							}
						}
						this.polyline[0].points = coors1
					})
					// #endif
				}
				this.covers = [...this.locationPoint, ...arr]

			},
			getLocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					success: async function(res) {
						let {
							latitude,
							longitude
						} = res
						// #ifdef MP-WEIXIN
						_this.reverseGeocoder(latitude, longitude)
						// #endif
						// #ifdef H5
						let data = await _this.exchangeDingwei(latitude, longitude)
						_this.travelDetailObj.fromArea = data.result.address
						_this.travelFromObj = data.result
						_this.city = data.result.ad_info.city
						_this.getShopId(data.result.ad_info.city)
						_this.getDelayDays()
						_this.$store.commit('upChoosedAddressObj', {
							from: data.result
						})
						let c = data.result.address_component.city
						_this.$store.commit('upChoosedRentCity', {
							from: {
								label: c,
								value: c
							}
						})
						// #endif
						_this.latitude = latitude
						_this.longitude = longitude

						// 当前位置
						_this.locationPoint.push({
							id: 1,
							latitude,
							longitude,
							iconPath: '/static/imgs/icons/now.png',
							width: 34,
							height: 34,
						})
						_this.covers = [..._this.locationPoint]
					}
				});
			},
			reverseGeocoder(latitude, longitude) {
				let _this = this
				qqmapsdk.reverseGeocoder({
					location: {
						latitude,
						longitude
					},
					success: function(res) {
						_this.travelDetailObj.fromArea = res.result.address
						_this.travelFromObj = res.result
						_this.city = res.result.ad_info.city
						_this.getShopId(res.result.ad_info.city)
						_this.getDelayDays()
						_this.$store.commit('upChoosedAddressObj', {
							from: res.result
						})
						let c = res.result.address_component.city
						_this.$store.commit('upChoosedRentCity', {
							from: {
								label: c,
								value: c
							}
						})

					},
				});
			},
			// #ifdef H5
			// h5计算距离
			H5pointJuli() {
				// const {
				// 	fromObj,
				// 	toObj
				// } = this.travelDetailObj;
				let _this = this

				let formGet = this.travelDetailObj.fromObj.lat + ',' + this.travelDetailObj.fromObj.lng
				let toGet = this.travelDetailObj.toObj.lat + ',' + this.travelDetailObj.toObj.lng
				this.$http.get(this.$api.pointJuli + '?from=' + formGet + '&to=' + toGet).then(res => {
					if (res.data.message == 'query ok') {
						_this.distance = res.data.result.rows[0].elements[0].distance / 1000
						if (_this.CarpoolPackageSinglePrice) {
							_this.showCarpoolPackagePrice = Math.round(_this.CarpoolPackageSinglePrice * _this.distance * 100) / 100
							_this.handleShowCarPoolPackage()
						}
					}
				})
			},
			// #endif
			// #ifdef MP-WEIXIN
			// 计算距离
			getDistance() {
				const {
					fromObj,
					toObj
				} = this.travelDetailObj;
				let _this = this
				qqmapsdk.calculateDistance({
					mode: 'driving',
					from: {
						latitude: fromObj.lat,
						longitude: fromObj.lng,
					},
					to: [{
						latitude: toObj.lat,
						longitude: toObj.lng,
					}],
					success(res) {
						// console.log(res);
						if (res.message == 'query ok') {
							_this.distance = res.result.elements[0].distance / 1000
							if (_this.CarpoolPackageSinglePrice) {
								_this.showCarpoolPackagePrice = Math.round(_this.CarpoolPackageSinglePrice * _this.distance * 100) / 100
								_this.handleShowCarPoolPackage()
							}
						}
					}
				})
			},
			// #endif
			initChooseDate() {
				let date = new Date()
				let formatNum = this.formatNum
				const year = date.getFullYear()
				const month = formatNum(date.getMonth() + 1);
				const day = formatNum(date.getDate());
				let hours = formatNum((date.getHours() + this.delayDay) % 24);
				// console.log(hours);
				let minutes = formatNum(date.getMinutes());
				let arr = []
				for (let i = 0; i < 12; i++) {
					arr.push(i * 5)
				}
				minutes = formatNum(arr.find((el) => el > minutes)) !== 'undefined' ? formatNum(arr.find((el) => el > minutes)) :
					'00'
				if (!Number(minutes)) {
					hours = formatNum(Number(hours) + 1);
				}

				const curDay = calendar.getDateObj() // 当前日期
				let aaa = year + '-' + month + '-' + day
				// const delayDateObj = calendar.getBeforeDate(curDay.full, this.delayDay)
				const delayDateObj = calendar.pinDateFn(this.delayDay)
				// console.log(delayDateObj);
				const arr_ = delayDateObj.split('-')
				const y = arr_[0]
				const m = arr_[1]
				const d = arr_[2]

				this.initChooseStartDate = `${y}-${m}-${d} ${hours}:${minutes}`
				this.travelDetailObj.date = `今天 ${hours}:00` && ''
				let Obj = {
					date: {
						label: '今天',
						value: `${year}-${month}-${day}`
					},
					hour: {
						label: hours,
						value: hours
					},
					minute: {
						label: minutes,
						value: minutes
					},
					year,
					month,
					day
				}
				if (minutes == 60) {
					minutes = '00'
					hours += 1
				}
				this.$set(this.travelDetailObj, 'dateObj', Obj)
				this.travelDateShowBtnDetail = `现在-${hours}:${minutes}随时出发`
			},
			formatNum(num) {
				return String(num).padStart(2, '0')
			},
			handleSwitchTravelStatus(status, travelDateShowBtnDetail) {
				this.travelStatus = status
				this.travelDateShowBtnDetail = travelDateShowBtnDetail
			},
			getBannerList() {
				let a = this.curNavbar && this.curNavbar.alias // type 3.拼车 4.租车 5.包车
				let type = a == 'carpool' ? 3 : a == 'Chartered' ? 5 : 4
				this.$http.get(this.$api.getCommonBanner + type).then(res => {
					if (res.code === 200) {
						this.CarpoolPackageSinglePrice = res.data.pinchePrice
						this.initInfo = res.data
						if (type === 5) {
							this.charteredBannerList = res.data.banner
						} else if (type === 3) {
							this.carpoolBannerList = res.data.banner
						}
						// this.showCarpoolPackagePrice =  res.data.pinchePrice * 2
					}
				})
			},
			// 获取商家id
			getShopId(city) { // 业务类型 0.大巴 1.接送 2.拼车 3.包车 4.租车
				let type = 2
				switch (this.curNavbar && this.curNavbar.alias) {
					case 'carpool':
						type = 2
						break
					case 'Chartered':
						type = 3
						break
					case 'rent':
						type = 4
						break
				}
				this.$http.get(this.$api.selectShopId + '?type=' + type + '&city=' + city).then(res => {
					if (res.code === 200) {
						this.shopId = res.data.shopId
					}
				})
			},
			//去富文本页面
			goToFWb(type, name) {
				uni.navigateTo({
					url: '/pages/others/depositRule?type=' + type + '&name=' + name
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.banner-wrap {
		height: 520rpx;
		background-color: pink;
	}

	.carpool_package_info-wrap {
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 64rpx;
		font-weight: bold;
		color: $red;
		padding: 40rpx 0 20rpx;
		position: relative;

		.icon {
			position: absolute;
			top: 20rpx;
			right: 30rpx;
			font-weight: 200;
		}
	}

	.travel_detail-wrap {
		margin-left: 48rpx;
		padding: 0 30rpx;
		position: relative;

		.more-icon {
			margin-left: 20rpx;
		}

		.input-wrap {
			border-bottom: 1px solid #EBEBEB;
			height: 88rpx;
			line-height: 88rpx;
			display: flex;
			justify-content: space-between;

			.input {
				flex: 1;
				font-size: 34rpx;
				font-weight: bold;
				padding-right: 20rpx;

				&.remark_input {
					font-weight: normal;
				}
			}
		}

		/deep/.input-placeholder {
			font-size: 30rpx;
			font-weight: normal;
			color: #ccc;
		}

		.step-wrap {
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			height: 118rpx;
			position: absolute;
			top: 30rpx;
			left: -15rpx;

			&::before {
				content: '';
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				height: 100%;
				width: 1px;
				background-color: #ebebeb;
			}

			.dot {
				height: 28rpx;
				width: 28rpx;
				border: 1px solid $blue;
				border-radius: 50%;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					height: 16rpx;
					width: 16rpx;
					border-radius: 50%;
					background-color: $blue;
				}

				&.dot_to {
					border: 1px solid $yellow;

					&::before {
						background-color: $yellow;
					}
				}
			}
		}

		.input_date-wrap {
			flex: 5;
			display: flex;
			// justify-content: space-between;

			.input {
				font-weight: normal;
				font-size: 30rpx;
			}
		}

		.input_recommend-wrap {
			flex: 5;
			display: flex;
			justify-content: space-between;
			text-align: right;

			.input {
				padding-right: 20rpx;
				font-weight: normal;
				font-size: 30rpx;
			}

			/deep/.input-placeholder {
				color: #ccc;
			}
		}

	}

	.travel_rent_content-wrap {
		width: 690rpx;
		margin: 20rpx auto 30rpx;
		height: 568rpx;
		background: #fff;
		box-shadow: 0px 0px 14px 0px rgba(184, 184, 184, 0.29);
		border-radius: 12rpx;

		.ul_wrap {
			display: flex;
			justify-content: space-between;
			margin: 0 30rpx;
			border-bottom: 1px solid #EBEBEB;

			.li-wrap {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				height: 138rpx;

				&:nth-child(1) {
					width: 160rpx;

					&.date {
						/deep/.input-placeholder {
							font-size: 30rpx;
							font-weight: normal;
							color: #ccc;
						}

						.input {
							font-weight: normal;
						}
					}
				}

				&:nth-child(2) {
					.con {
						width: 280rpx !important;
					}
				}

				&:nth-child(3) {
					width: 100rpx;
				}

				.tip {
					font-size: 24rpx;
					color: #999;
				}

				.con {
					font-size: 32rpx;
					font-weight: bold;
					width: 140rpx;

					&.address {
						display: flex;
						align-items: center;
						padding-right: 20rpx;

						.after {
							display: inline-block;
							position: relative;

							&::after {
								content: '';
								height: 0;
								width: 0;
								border: 14rpx solid transparent;
								border-top: 14rpx solid #ccc;
								position: absolute;
								top: -4rpx;
								right: -40rpx;
							}
						}
					}
				}
			}
		}
	}

	.common-btn {
		width: 520rpx;
		margin-top: 40rpx;
		box-shadow: none;
	}

	.other-wrap {
		width: 690rpx;
		margin: 30rpx auto;
		display: flex;
		justify-content: space-between;

		.l-wrap {
			height: 320rpx;
			width: 324rpx;
			// background-color: pink;
			border-radius: 12rpx;
			overflow: hidden;
		}

		.r-wrap {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.img {
				width: 346rpx;
				height: 150rpx;
				// background-color: $blue;
				border-radius: 12rpx;
				overflow: hidden;
			}
		}
	}
</style>
